<template>
  <div class="sider">
    <div class="loading" v-if="loading">
      <p>正在加载中</p>
    </div>
    <Menu v-if="!loading" ref="leftMenu" :open-names="[openName]" :active-name="activeName">
      <Submenu name="myproject">
        <template slot="title">
          <Icon type="ios-list" />
          我的项目
        </template>
        <MenuItem @click.native="resetType" to="/myproject/rojectProcedures/createProgram" name="/myproject/rojectProcedures"
          v-if="powerInfo['我的项目']['项目流程']">项目流程</MenuItem>
        <MenuItem to="/myproject/underway" name="/myproject/underway" v-if="powerInfo['我的项目']['正在进行']">正在进行</MenuItem>
        <MenuItem to="/myproject/projectQuery" name="/myproject/projectQuery" v-if="powerInfo['我的项目']['项目查询']">项目查询</MenuItem>
        <MenuItem to="/myproject/myProjectCheck" name="/myproject/myProjectCheck" v-if="powerInfo['我的项目']['我的审核']">我的审核</MenuItem>
        <MenuItem to="/myproject/myProjectArrange" name="/myproject/myProjectArrange" v-if="powerInfo['我的项目']['项目分配']">项目分配</MenuItem>
        <MenuItem to="/myproject/myProjectStock" name="/myproject/myProjectStock" v-if="powerInfo['我的项目']['项目库']">项目库</MenuItem>
      </Submenu>
      <Submenu name="memberCenter">
        <template slot="title">
          <Icon type="ios-person" />
          会员中心
        </template>
        <MenuItem to="/memberCenter/userHeartData" name="/memberCenter/userHeartData" v-if="powerInfo['会员中心']['基本资料']">机构信息</MenuItem>
        <MenuItem to="/memberCenter/userHeartData" name="/memberCenter/userHeartData" v-if="powerInfo['会员中心']['机构基本资料']">机构基本资料
        (待定)</MenuItem>
        <MenuItem to="/memberCenter/userHeartData" name="/memberCenter/userHeartData" v-if="powerInfo['会员中心']['人员管理']">人员管理
        (待定)</MenuItem>
        <MenuItem to="/memberCenter/userHeartInstall" name="/memberCenter/userHeartInstall" v-if="powerInfo['会员中心']['设置']">设置</MenuItem>
        <MenuItem to="/memberCenter/userHeartInstall" name="/memberCenter/userHeartInstall" v-if="powerInfo['会员中心']['系统设置']">系统设置
        (待定)</MenuItem>
        <MenuItem to="/memberCenter/userHeartInstall" name="/memberCenter/userHeartInstall" v-if="powerInfo['会员中心']['安全设置']">安全设置
        (待定)</MenuItem>
      </Submenu>
      <Submenu v-if="powerInfo['消息中心']" name="messageCenter">
        <template slot="title">
          <Icon type="ios-notifications" />
          消息中心
        </template>
        <MenuItem to="/messageCenter/newHeart" name="/messageCenter/newHeart">信息</MenuItem>
        <MenuItem to="/messageCenter/newHeart" name="/messageCenter/newHeart">联系人 (待定)</MenuItem>
      </Submenu>
      <Submenu name="about">
        <template slot="title">
          <Icon type="ios-alert-outline" />
          关于我们
        </template>
        <MenuItem to="/about/aboutus" name="/about/aboutus">关于我们</MenuItem>
        <MenuItem to="/about/aboutUsAdvise" name="/about/aboutUsAdvise">问题反馈</MenuItem>
      </Submenu>
    </Menu>
    <div slot="trigger"></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,
        activeName: this.$route.path.split("/", 3).join('/'),
        openName: this.$route.meta.title,
        powerInfo: [],
        powerList: {
          // 一级机构账号
          Ent: {
            '我的项目': {
              '正在进行': true,
              '项目查询': true,
              '项目库': true,
            },
            '会员中心': {
              '机构信息': true,
              '机构基本资料': true,
              '人员管理': true,
              '设置': true,
              '系统设置': true,
              '安全设置': true,
            },
          },
          // 总经理 中工
          12: {
            '我的项目': {
              '项目流程': true,
              '正在进行': true,
              '项目查询': true,
              '我的审核': true,
              '项目分配': true,
              '项目库': true,
            },
            '会员中心': {
              '机构信息': true,
              '机构基本资料': true,
              '个人基本信息': true,
              '安全设置': true,
            },
            '消息中心': true,
          },
          // 部负责人
          3: {
            '我的项目': {
              '项目流程': true,
              '正在进行': true,
              '项目查询': true,
              '项目分配': true,
            },
            '会员中心': {
              '机构信息': true,
              '机构基本资料': true,
              '个人基本信息': true,
              '安全设置': true,
            },
            '消息中心': true,
          },
          // 审核工程师 工程师
          45: {
            '我的项目': {
              '项目流程': true,
              '正在进行': true,
              '项目查询': true,
              '我的审核': true,
              '项目分配': true,
            },
            '会员中心': {
              '机构信息': true,
              '机构基本资料': true,
              '个人基本信息': true,
              '安全设置': true,
            },
            '消息中心': true,
          },
          // 技术员
          6: {
            '我的项目': {
              '项目流程': true,
              '正在进行': true,
              '项目查询': true,
              '我的审核': true,
            },
            '会员中心': {
              '机构信息': true,
              '机构基本资料': true,
              '个人基本信息': true,
              '安全设置': true,
            },
            '消息中心': true,
          },
          // 档案员
          7: {
            '我的项目': {
              '正在进行': true,
              '项目查询': true,
              '项目库': true,
            },
            '会员中心': {
              '机构信息': true,
              '机构基本资料': true,
              '个人基本信息': true,
              '安全设置': true,
            },
            '消息中心': true,
          },
          // 业务人员
          8: {
            '我的项目': {
              '项目流程': true,
              '正在进行': true,
              '项目查询': true,
            },
            '会员中心': {
              '机构信息': true,
              '机构基本资料': true,
              '个人基本信息': true,
              '安全设置': true,
            },
            '消息中心': true,
          },
        }
      }
    },
    watch: {
      '$route': function (to, from) {
        this.activeName = this.$route.path.split("/", 3).join('/'),
          this.openName = this.$route.meta.title
      }
    },
    mounted() {
      // 获取用户权限
      axios.get('/accountNumber/userOrg').then((res) => {
        let powerList = this.powerList,
          type = res.type,
          typeId = 0
        switch (type) {
          // 一级 机构账号
          case 'ent':
            typeId = 0
            break;
            // 总经理 总工
          case 1:
          case 2:
            typeId = 2
            break;
            // 部负责人 审核工程师 工程师
          case 3:
          case 4:
          case 5:
            typeId = 345
            break;
          default:
            typeId = type
        }
        this.powerInfo = powerList[typeId]
        this.loading = false
      }).catch((res) => {
        // 对于 错误 跳登录页
        this.$router.push({
          name: 'login'
        })
      })
    },
    methods: {
      resetType() {
        localStorage.projectType = 1
      }
    }

  }
</script>

<style lang="less">
  .sider {
    background: #025bb7 !important;
    color: #ffffff;

    .ivu-menu-light {
      background: #025bb7;
      color: #ffffff;
    }

    a {
      background: #ffffff;
      color: #515a6e;
      border-bottom: 1px solid #dedfe3;
    }
  }

  .ivu-menu-vertical.ivu-menu-light:after {
    width: 0px !important;
  }

  .ivu-layout-sider-zero-width-trigger {
    z-index: 10;
  }

  .ivu-menu {
    width: 100% !important;
  }

  .loading {
    text-align: center;
    margin-top: 10px;
  }
</style>